<!-- DataQualityRadar.vue -->
<template>
  <div class="data-quality-radar">
    <div class="panel-header">
      <h2><el-icon><DataAnalysis /></el-icon> 数据质量评估</h2>
      <div class="score-info">
        <el-tag type="warning">综合评分: {{ overallScore }}</el-tag>
      </div>
    </div>

    <div class="radar-chart">
      <div ref="radarChart" class="chart-container"></div>
    </div>

    <div class="quality-metrics">
      <div class="metrics-grid">
        <div class="metric-card" v-for="(metric, index) in qualityMetrics" :key="index">
          <div class="metric-header">
            <div class="metric-icon">
              <el-icon>
                <component :is="metric.icon" />
              </el-icon>
            </div>
            <div class="metric-title">{{ metric.name }}</div>
          </div>
          <div class="metric-value">{{ metric.score }}<span>/100</span></div>
          <div class="metric-progress">
            <el-progress
                :percentage="metric.score"
                :stroke-width="12"
                :status="getStatus(metric.score)"
                :show-text="false"
            />
          </div>
          <div class="metric-trend">
            <el-icon :class="metric.trend"><Trend /></el-icon>
            <span>{{ metric.trend === 'up' ? '提升' : '下降' }} {{ metric.change }}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { DataAnalysis,  Check, CircleCheck, Warning } from '@element-plus/icons-vue'
import {ElIcon, ElProgress} from "element-plus";

const overallScore = ref(86)
const qualityMetrics = ref([
  { name: '完整性', score: 92, icon: 'Check', trend: 'up', change: 3 },
  { name: '准确性', score: 88, icon: 'CircleCheck', trend: 'up', change: 2 },
  { name: '一致性', score: 85, icon: 'Warning', trend: 'down', change: 1 },
  { name: '时效性', score: 82, icon: 'Warning', trend: 'up', change: 4 },
  { name: '唯一性', score: 90, icon: 'Check', trend: 'up', change: 2 },
  { name: '有效性', score: 79, icon: 'Warning', trend: 'down', change: 2 }
])

const radarChart = ref(null)
let chartInstance = null

const getStatus = (score) => {
  if (score >= 90) return 'success'
  if (score >= 80) return ''
  return 'exception'
}

onMounted(() => {
  initRadarChart()

  onBeforeUnmount(() => {
    if (chartInstance) {
      chartInstance.dispose()
    }
  })
})

const initRadarChart = () => {
  if (radarChart.value) {
    chartInstance = echarts.init(radarChart.value, 'dark')

    const option = {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'item'
      },
      legend: {
        data: ['当前评分', '目标评分'],
        textStyle: { color: '#a0bff0' },
        bottom: 0
      },
      radar: {
        indicator: [
          { name: '完整性', max: 100 },
          { name: '准确性', max: 100 },
          { name: '一致性', max: 100 },
          { name: '时效性', max: 100 },
          { name: '唯一性', max: 100 },
          { name: '有效性', max: 100 }
        ],
        radius: '65%',
        axisName: {
          color: '#c2d4ff',
          fontSize: 12
        },
        splitArea: {
          areaStyle: {
            color: ['rgba(93, 102, 224, 0.1)', 'rgba(93, 102, 224, 0.2)']
          }
        },
        axisLine: {
          lineStyle: { color: 'rgba(93, 102, 224, 0.5)' }
        },
        splitLine: {
          lineStyle: { color: 'rgba(93, 102, 224, 0.3)' }
        }
      },
      series: [
        {
          name: '数据质量',
          type: 'radar',
          data: [
            {
              value: [92, 88, 85, 82, 90, 79],
              name: '当前评分',
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: {
                width: 2,
                color: '#4db8ff'
              },
              areaStyle: {
                color: 'rgba(77, 184, 255, 0.2)'
              },
              itemStyle: {
                color: '#4db8ff'
              }
            },
            {
              value: [95, 92, 90, 90, 95, 85],
              name: '目标评分',
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: {
                width: 2,
                type: 'dashed',
                color: '#9c42ff'
              },
              itemStyle: {
                color: '#9c42ff'
              }
            }
          ]
        }
      ]
    }

    chartInstance.setOption(option)

    // 窗口大小变化时重新调整图表
    window.addEventListener('resize', () => {
      if (chartInstance) chartInstance.resize()
    })
  }
}
</script>

<style scoped>
.data-quality-radar {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5vh 1.5vw;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
}

.panel-header h2 {
  font-size: 1.3rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #9c42ff;
}

.radar-chart {
  height: 35vh;
  margin-bottom: 2vh;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.quality-metrics {
  flex: 1;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5vh 1.5vw;
}

.metric-card {
  background: rgba(20, 30, 60, 0.6);
  border-radius: 8px;
  padding: 1.5vh 1.5vw;
  border: 1px solid rgba(93, 102, 224, 0.2);
  transition: all 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(93, 102, 224, 0.2);
  border-color: rgba(93, 102, 224, 0.5);
}

.metric-header {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  margin-bottom: 1vh;
}

.metric-icon {
  width: 28px;
  height: 28px;
  background: rgba(93, 102, 224, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-icon .el-icon {
  color: #4db8ff;
  font-size: 1.1rem;
}

.metric-title {
  font-size: 1rem;
  font-weight: 500;
  color: #c0d1ff;
}

.metric-value {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(to bottom, #ffffff, #9c42ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0.5vh 0;
}

.metric-value span {
  font-size: 1rem;
  color: #a0bff0;
}

.metric-progress {
  margin: 1vh 0;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.85rem;
}

.metric-trend .el-icon {
  font-size: 1.1rem;
}

.metric-trend .up {
  color: #2ecc71;
}

.metric-trend .down {
  color: #e74c3c;
}
</style>